import React, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import Label from '../../../components/Label';
import { TokenStat } from '../../../basis-cash/types';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import TokenSymbol from '../../../components/TokenSymbol';
import { commify } from 'ethers/lib/utils';
import config from '../../../config';
import LaunchCountdown from '../../../components/Dial';
import shangsuo from '../../../assets/image/img_shangsuo@2x.png';
import moment from "moment";
import Countdown from "react-countdown";
import sht from '../../../assets/image/sht.png';
import { VoteInfo } from '../../../basis-cash/types';
import useBasisCash from '../../../hooks/useBasisCash';
import { ethers } from 'ethers';
import useBalanceOf from '../../../hooks/useBalanceOf';
import useVoteStartTime from '../../../hooks/useVoteStartTime';
import useVoteEndTime from '../../../hooks/useVoteEndTime';
import useTotalVotes from '../../../hooks/useTotalVotes';
import dui from '../../../assets/image/dui.jpg';
import cuo from '../../../assets/image/cuo.jpg';
import useVoted from '../../../hooks/useVoted';
import Button from '../../../components/Button';
import useVoterExist from '../../../hooks/useVoterExist';

interface VoteCardProps {
  vote: VoteInfo,
}

const VoteCard: React.FC<VoteCardProps> = ({
  vote,
}) => {
  const basisCash = useBasisCash();
  const starttime = useVoteStartTime(vote.contract);
  console.log('vote1 starttime', starttime);
  const endtime = useVoteEndTime(vote.contract);
  const {onVoted} = useVoted(vote);
  vote.starttime = Number(ethers.utils.formatUnits(starttime, 0)) * 1000;
  vote.endtime = Number(ethers.utils.formatUnits(endtime, 0)) * 1000;
  console.log('vote', vote.endtime);
  const yes = useTotalVotes(vote.contract, 0);
  const no = useTotalVotes(vote.contract, 1);
  console.log('vote yes', yes);
  console.log('vote no', no);
  const exist = useVoterExist(vote.contract);
  console.log('vote exist', exist);
  //const yes = Number(ethers.utils.formatUnits(await basisCash.contracts['proposal'].startTime(), 18));
  //const no = Number(ethers.utils.formatUnits(await basisCash.contracts['proposal'].endTime(), 18));
  return (
    <BlockTop>
      <p style={{fontSize: 16, color: '#fff', textAlign: 'center', paddingTop: 20}}>
        {vote.name}
      </p>
      <BlockSee href={vote.url} target="_blank">
        View detail
      </BlockSee>
      {
        Date.now() < vote.endtime
        ?
        <>
          <BlockRes>
            <Ingp>投票已开启</Ingp>
            <Ingp>投票后不可撤销或更改</Ingp>
            <DivShiJian>
              <Ingp style={{marginTop: 5}}>{Date.now() < vote.starttime ? '即将开启' : '投票已开启'}</Ingp>
              <IngTime>
                <Countdown date={moment(Date.now() < vote.starttime ? vote.starttime : vote.endtime).toDate()} onComplete={() => {/*setStartTime(ethers.BigNumber.from(Date.now()/1000))*/}} />
              </IngTime>
            </DivShiJian>
          </BlockRes>
          <BlockResBottom>
            <BlockShi>
              <span style={{fontSize:14, color: '#fff',textAlign: 'center'}}>赞同</span>
              <SpanShi>{Math.floor(yes)} votes</SpanShi>
              <ButtonZan onClick={() => Date.now() < vote.starttime ? null : onVoted('0')}>赞同</ButtonZan>
            </BlockShi>
            <BlockShi>
              <span style={{fontSize:14, color: '#fff',textAlign: 'center'}}>反对</span>
              <SpanFou>{Math.floor(no)} votes</SpanFou>
              <ButtonFan onClick={() => Date.now() < vote.starttime ? null : onVoted('1')}>反对</ButtonFan> 
            </BlockShi>
          </BlockResBottom>
          {
            exist
            ?
            <BlockText1>已投票</BlockText1>
            :
            <></>
          }
          
        </>
        :
        <></>
      }
      {
        Date.now() > vote.endtime
        ?
        (
          yes >= no
          ?
          <>
          <BlockRes>
             <img
                src={dui}
                style={{width: 33, height: 'auto'}}
              />

                <BlockText>通过</BlockText>
             </BlockRes>
             <BlockResBottom>
               <BlockShi>
                  <span style={{fontSize:14, color: '#fff',textAlign: 'center'}}>赞同</span>
                  <SpanShi>{Math.floor(yes)} 票</SpanShi>
               </BlockShi>
               <BlockShi>
                  <span style={{fontSize:14, color: '#fff',textAlign: 'center'}}>反对</span>
                  <SpanShi>{Math.floor(no)} 票</SpanShi>
               </BlockShi>
             </BlockResBottom>
             </>
          :
          <>
            <BlockRes>
             <img
                src={cuo}
                style={{width: 33, height: 'auto'}}
              />

                <BlockText1>未通过</BlockText1>
             </BlockRes>
             <BlockResBottom>
               <BlockShi>
                  <span style={{fontSize:14, color: '#fff',textAlign: 'center'}}>赞同</span>
                  <SpanFou>{Math.floor(yes)} 票</SpanFou>
               </BlockShi>
               <BlockShi>
                  <span style={{fontSize:14, color: '#fff',textAlign: 'center'}}>反对</span>
                  <SpanFou>{Math.floor(no)} 票</SpanFou>
               </BlockShi>
             </BlockResBottom>
          </>
        )
        :
        <></>
      }
      
    </BlockTop>
  );
};

const BlockTop = styled.div`
background-color: #36355E;
width: 220px;
padding: 0px 10px;
display: flex;
min-height: 385px;
flex-direction: column;
margin-top: 20px;
@media (max-width: 768px) {
  width: 80%;
  margin-top: 20px;
  justify-content: center;
}
`

const BlockText= styled.div`
  font-size: 16px;
  color: #92E37B;
  text-align: center;
  margin-top: 6px;
`

const BlockText1= styled.div`
  font-size: 16px;
  color: #E85A40;
  text-align: center;
  margin-top: 6px;
`

const BlockRes = styled.div`
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

const DivShiJian = styled.div`
  background-color: #100428;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
`

const Ingp = styled.p`
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #7270A0;
  line-height: 22px;
`

const IngTime = styled.p`
  margin: 5px 0;
  padding: 0;
  font-size: 20px;
  font-family: PingFang SC;
  color: #FA4E32;
  line-height: 22px;
`

const BlockResBottom= styled.div`
display: flex;
justify-content: space-between;
padding-bottom: 20px;
`

const ButtonZan  = styled.button`
align-items: center;
background-color: #92E37B;
border: 0;
border-radius: 24px;
color: #000000;
cursor: pointer;
display: flex;
font-size: 15px;
height: 40px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
outline: none;
padding-left: 0px;
padding-right: 0px;
margin-top: 5px;
width: 100px;
`;

const ButtonFan  = styled.button`
align-items: center;
background-color: #E85A40;
border: 0;
border-radius: 20px;
color: #000000;
cursor: pointer;
display: flex;
font-size: 15px;
height: 40px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
outline: none;
padding-left: 0px;
padding-right: 0px;
margin-top: 5px;
width: 100px;
`;

const BlockShi= styled.div`
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
`

const SpanShi= styled.span`
  font-size: 16px;
  color: #92E37B;
  text-align: center;
`


const SpanFou= styled.span`
font-size: 16px;
color: #E85A40;
text-align: center;
`

const BlockSee = styled.a`
font-size: 16px;
color: #E95B40;
&:link {
  color: #E95B40;
}
text-align: center; 
text-decoration: none;
`;

export default VoteCard;
